<template>
  <div>
    <!-- 
      指令：指的是以v-开头的标签属性，
        指令作用：给标签添加额外的功能
      v-bind指令
        作用：动态设置标签属性值
        语法：v-bind:属性名="vue变量"
          简写：:属性名="vue变量"

     -->
    <a v-bind:href="url">我是a标签</a>
    <img :src="imgSrc" alt="">
  </div>
</template>

<script>
import imgSrc from "./assets/三剑客.png"
export default {
  data(){
    return {
      url: "https://www.baidu.com",
      // 这种方式引入是有问题的，因为项目是打包在内存中的，所以不会有assets文件，
      // 且webpack也不会对这个图片进行打包，只会把"./assets/三剑客.png"当成普通字符串
      // imgSrc: "./assets/三剑客.png"  
      imgSrc: imgSrc 
    }
  }
}
</script>

<style>

</style>